<!--  -->
<template>
  <div class="box">
    <div class="top">
      <img src="../../assets/detailspage/QQ图片20210324170108.png" alt="" />
      <!-- <img src="../../assets/detailspage/QQ图片20210324091243.png" alt="" /> -->
    </div>
    <div class="center">
      <div class="center_1">
        <div class="count">
          <van-count-down :time="time" />
          <div>后过期</div>
        </div>
        <div class="joingroup">
          <p>已有 <span>4</span> 人参团，仅差 <span>2</span> 人</p>
          <h1>2</h1>
          <van-progress pivot-text="红色" color="#ee0a24" :percentage="50" />
          <button class="pin" @click="pin()">邀请好友拼团</button>
          <van-count-down :time="time" />
          <div>后过期</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="record">拼团记录</div>
      <div class="bottom_1">
        <img
          src="../../assets/detailspage/QQ图片20210325200144.png"
          alt=""
        />N_N游戏 <b>已拼团</b>（还差5人）<br />
        <img
          src="../../assets/detailspage/QQ图片20210325200144.png"
          alt=""
        />向阳微笑 <b>已拼团</b>（还差4人）<br />
        <img
          src="../../assets/detailspage/QQ图片20210325200144.png"
          alt=""
        />初夏 <b>已拼团</b>（还差3人）<br />
        <img
          src="../../assets/detailspage/QQ图片20210325200144.png"
          alt=""
        />一米阳光 <b>已拼团</b>（还差2人）<br />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
    };
  },
  methods: {
    pin() {
      this.$router.push("/invitation");
    },
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.pin{
  margin-top: 20px;
}
.box {
  width: 100%;
  height: 100%;
  background: rgb(254, 226, 178);
}
.top {
  height: 16rem;
  width: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}
.center {
  width: 100%;
  height: 15rem;
}
.center_1 {
  width: 90%;
  height: 14rem;
  border-radius: 1rem;
  background-color: rgb(255, 247, 225);
  margin: 1rem auto;

  .count {
    width: 8rem;
    height: 2rem;
    margin: 0 auto;
    border-radius: 0rem 0rem 1rem 1rem;
    display: flex;
    justify-content: space-around;
    background: white;
    flex-direction: abs($number: 0);
    .van-count-down {
      margin-left: 0.275rem;
    }
    div {
      width: 6rem;
    }
  }
}
.joingroup {
  margin-left: 5.5rem;
  h1 {
    margin-left: 4.5rem;
    color: red;
  }
  button {
    width: 80%;
    height: 3rem;
    background: orange;
    color: white;
    border-radius: 3rem;
    font-size: 1rem;
    margin: 0 auto;
    outline: none;
    border: 0;
    cursor: pointer;
  }
}
.bottom {
  .record {
    width: 100%;
    height: 2rem;
    font-size: 1.3rem;
    color: red;
    background: rgb(255, 250, 25);
  }
  .bottom_1 {
    b {
      color: red;
    }
  }
}
</style>
